<div id="facebookLoggedInUserInfo" class="profileFacebookButtons">
	<div class="fl">
		<span id="facebookLoggedInProfileImage"></span>
		${message(code: 'auth.login.facebook.connected.user1')}
		<span id="facebookLoggedInUserName"></span>
		${message(code: 'auth.login.facebook.connected.user2')}
		<a href="#" onclick="facebookLogout();"> <g:message
				code="auth.login.facebook.connected.user3" />
		</a>
	</div>
</div>

<script type="text/javascript">
  
  jQuery(document).ready(function() {
	 function updateInfo(response) {
	             
	     if (response.authResponse) {
	       FB.api('/me', function(response) {
	       
	         $("#facebookLoggedInUserName").html(response.name);   
	         $("#facebookLoggedInProfileImage").html('<img src="https://graph.facebook.com/'
	             + response.id + '/picture">');     
	         $("#facebookLoggedInUserInfo").css('display', 'block');     
	       });
	     } else {
	     	 $("#facebookLoggedInUserInfo").css('display', 'none');  
	     }
	   }
	   
	   FB.getLoginStatus(updateInfo);
	   
	   FB.Event.subscribe('auth.authResponseChange', updateInfo);
       FB.Event.subscribe('auth.login', updateInfo);
	
	   FB.Event.subscribe('auth.logout', function(response) {
	   FB.getLoginStatus(updateInfo);  
	});
  });
  
</script>